import React from 'react'
import styles from './css/prefecture/style.module.scss'
import PrefectureItem from './PrefectureItem';

export default function Prefecture(props) {
  return (
    // 新品专区
    <div className={styles.cake + ' ' + styles['cake-colorful'] + ' ' + styles.anchor}>
      {/* 新品标题 */}
      <h4 className={styles['cake-title']}>
        {props.item?.title}
        <span>/</span>
        <span>{props.item?.subTitle}</span>
      </h4>
      {/* 新品标题图片 */}
      <div className={styles['colorful-top-banner']}>
        <a href="#">
          <img src={'//oss.51cocoa.com/' + props.item?.banner} alt="" />
        </a>
      </div>
      {/* 新品列表商品 */}
      <div className={styles["color-product-list"]}>
        <div className={styles["list-box"]}>
          <ul>
            {props.item?.contents.map(cake => (
              <PrefectureItem key={cake.id} cake={cake} />
            ))}

          </ul>
        </div>
      </div>
    </div>
  )
}
